<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 实现双向数据绑定 语法-->
        <!-- <p>
            <input type="text" :value='val' @input="val = $event.target.value">
        </p> -->
        <!-- 实现双向绑定的语法糖 -->
        <!-- <p>
            <input type="text" v-model="val">
        </p> -->

        <!-- v-model的使用 -->
        <!-- 01:在单选框上的使用 -->
        <p>
            <input type="radio" name="sex" value="男" v-model="gender">男
            <input type="radio" name="sex" value="女" v-model='gender'>女
        </p>
        <!-- 02:在复选框上的使用  -->
        <p>
            <input type="checkbox" v-model="checkboxFlag">选中
        </p>
        <!-- 03:多个复选框上的使用 -->
        <p>
            <input type="checkbox" value="美女" v-model="checkboxArr">美女
            <input type="checkbox" value="豪宅" v-model="checkboxArr">豪宅
            <input type="checkbox" value="豪车" v-model="checkboxArr">豪车
        </p>
        <!--  04: 在下拉框上的使用 -->
        <select name="" id="" v-model="seletdvalue">
            <option value="html5">html5</option>
            <option value="java">java</option>
            <option value="python">python</option>
            <option value="大数据">大数据</option>
        </select>
    </div>

</body>

</html>
<script>

    // v-model: 内置指令
    // 定义: 实现双向绑定的语法糖
    // 一般用于在表单元素上使用 或者组件上使用

    // MVVM的理解:
    // M 表示model 也就是data 数据层
    // VM 就是vm 实例, 组件实例或根实例 
    // V 就是 view 视图层 也就是页面
    // 当数据初始化渲染时, data 中的数据可以渲染页面
    // 用于反过来也可以操作页面, 修改数据,   vm 就是一个桥梁 连接页面和数据的一个桥梁


    const { createApp } = Vue;
    const viewmodel = createApp({
        data() {
            return {
                val: '千锋教育',
                gender: '女',
                checkboxFlag: true,
                checkboxArr: ['豪宅', '豪车'],
                seletdvalue: 'python'
            }
        },
        methods: {
            changeFn(e) {
                this.val = e.target.value
            }
        }
    }).mount('#app')


</script>